<template>
    <div>当前鼠标位置</div>
    <div>x: {{ mouse.x }}</div>
    <div>y: {{ mouse.y }}</div>
    <div>当前点击次数：{{ count }}</div>
    <button @click="add">点击</button>
</template>

<script setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue';

let count = ref(0)
const add = () => {
    count.value++
}


let mouse = reactive({
    x: 100, y: 100
})
function mouseMove(e) {
    mouse.x = e.pageX
    mouse.y = e.pageY
}

onMounted(
    () => {
        document.addEventListener('mousemove', mouseMove)
    }
)
onUnmounted(
    () => {
        document.removeEventListener('mousemove', mouseMove)
    }
)
</script>